<template>
  <view class="container">
    <uv-navbar 
      class="bold-title" 
      title="新增配种记录" 
      @leftClick="leftClick"
      :safeAreaInsetTop="true"
      :placeholder="true"
      :height="'44px'"
    ></uv-navbar>
    
    <view class="content-area">
      <InfoTitleList :infoTitleList="animalInfoList0"></InfoTitleList>
      <view class="form-item">
        <text class="label">牧民</text>
        <input v-model="formData.F_UserName" placeholder="韩梅梅" class="input" />
      </view>
      <view class="form-item">
        <text class="label">电话</text>
        <input v-model="formData.F_Phone" placeholder="未填写" class="input" />
      </view>
      <view class="form-item">
        <text class="label">配种地址</text>
        <input v-model="formData.F_Address" placeholder="未选择" class="input" />
      </view>

      <InfoTitleList :infoTitleList="animalInfoList"></InfoTitleList>
      <view class="form-item">
        <text class="label">选择公牛</text>
        <CattleDropdown 
                  :cattleList="bullList" 
                  @select="handleBullSelect" 
                  :placeholder="'选择公牛'"
                />
      </view>
      <view class="form-item">
        <text class="label">选择母牛</text>
        <CattleDropdown 
                  :cattleList="cowList" 
                  @select="handleCowSelect" 
                  :placeholder="'选择母牛'"
                />
      </view>
      <view class="form-item">
        <text class="label">备注</text>
        <input v-model="formData.F_Remark" placeholder="" class="input" />
      </view>
    </view>
    
    <view class="header">
      <button class="add-button" @click="handleSubmit">确定配种</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { addBreed, getCattleList } from '@/api/manageRight.js';
import InfoTitleList from '@/components/Animals/InfoTitleList.vue';
import CattleDropdown from '@/components/Quarantinehome/CattleDropdown.vue';

const animalInfoList0 = [{ title: '牧民信息（操作员）' }];
const animalInfoList = [{ title: '选择配种对象' }];

const formData = ref({
  F_UserName: '',
  F_Phone: '',
  F_Address: '',
  F_PaternalLine: '',
  F_Matriarchal: '',
  F_Remark: ''
});

const bullList = ref([]);
const cowList = ref([]);

const fetchCattleList = async () => {
  try {
    const response = await getCattleList();
    if (response.code === 200 && response.data) {
      bullList.value = response.data.map(item => ({
        id: item.F_Id,
        imei: item.F_IMEI
      }));
      cowList.value = response.data.map(item => ({
        id: item.F_Id,
        imei: item.F_IMEI
      }));
    }
  } catch (error) {
    console.error('获取牲畜列表失败:', error);
    uni.showToast({
      title: '获取牲畜列表失败',
      icon: 'none',
      duration: 2000
    });
  }
};

const handleBullSelect = (selectedBull) => {
  formData.value.F_PaternalLine = selectedBull;
};

const handleCowSelect = (selectedCow) => {
  formData.value.F_Matriarchal = selectedCow;
};

const handleSubmit = async () => {
  const requiredFields = [
    'F_UserName', // 牧民姓名
    'F_Phone',    // 联系电话
    'F_Address',  // 配种地址
    'F_PaternalLine', // 公牛编号
    'F_Matriarchal',  // 母牛编号
    'F_Remark' //备注
  ];

  const missing = requiredFields.filter(field => !formData.value[field]);
 console.log(formData.value);
  if (missing.length > 0) {
    uni.showToast({
      title: `缺少必填字段：${missing.join(', ')}`,
      icon: 'none',
      duration: 2000
    });
    return;
  }

  try {
    const response = await addBreed(formData.value);
    if (response.code === 200) {
       console.log(response.message)
      // uni.navigateBack();
    } else {
      uni.showToast({
        title: response.message || '添加失败',
        icon: 'none',
        duration: 2000
      });
    }
  } catch (error) {
    console.error('接口调用失败:', error);
    uni.showToast({
      title: '网络请求失败，请重试',
      icon: 'none',
      duration: 3000
    });
  }
};

const leftClick = () => {
  uni.navigateBack();
};

onMounted(() => {
  fetchCattleList();
});
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.bold-title {
  font-weight: bold;
}

.content-area {
  flex: 1;
  overflow: auto;
  padding: 30rpx;
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.label {
  font-size: 14px;
  color: #333;
  margin-left: 4%;
  text-align: right;
  padding-right: 10px;
}

.input {
  font-size: 14px;
  color: #666;
  width: 70%;
  text-align: right;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  outline: none;
}

.select-button {
  font-size: 14px;
  color: #0bcb75;
  background-color: transparent;
  border: none;
  padding: 0;
}

.header {
  padding: 30rpx;
  background-color: white;
  z-index: 100;
}

.add-button {
  background-color: #0bcb75;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 16rpx;
  width: 100%;
  font-size: 32rpx;
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>